<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小组作业</title>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.net/font-awesome/4.7.0/css/font-awesome.css"
    />
    <link href="css/bootstrap-4.3.1.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/comm.css" />
    <link rel="stylesheet" href="css/home.css" />
  </head>
  <body>
    <div class="j-nav" id="top">
      <div class="logo-img">
        <img src="images/logo.png" width="100%" height="100%" alt="" />
      </div>
      <ul class="nav-list j-sm-display-none">
        <li><a href="index.html">首页</a></li>
        <!-- <li><a href="tank.html">作品</a></li> -->
        <li class="drowdown">
          小组作业
          <div class="drowdown-box">
            <p>
              <span class="font-weight-bold">组员作业：</span
              ><span><a href="">黄明杰</a></span
              ><span><a href="">张桂泉</a></span
              ><span><a href="">许安</a></span
              ><span><a href="">李冠林</a></span
              ><span><a href="">陈家乐</a></span>
            </p>
            <p>
              <span class="font-weight-bold">其他：</span
              ><span><a href="tank.html">坦克小游戏</a></span
              ><span><a href=".\gameJS\game1024a.html">1024小游戏</a></span
              ><span
                ><a href="https://gitee.com/cvscloud/xiaozu-kaifa"
                  >小组作业码云仓库</a
                ></span
              >
            </p>
          </div>
        </li>

        <li><a href="zhang.html" target="_blank">分享</a></li>
        <li>
          <a href="https://gitee.com/cvscloud/xiaozu-kaifa" target="_blank"
            >码云</a
          >
        </li>
        <li><a href="about.html">关于</a></li>
      </ul>
      <div class="nav-form j-flex j-sm-display-none">
        <input type="text" />
        <button>搜索</button>
      </div>
      <div class="open-side j-displaynone float-right" style="cursor: pointer">
        <i
          class="fa fa-list"
          style="font-size: 30px; color: white; padding: 18px; display: block"
        ></i>
        <i
          class="fa fa-align-justify"
          style="font-size: 30px; color: white; padding: 18px; display: none"
        ></i>
      </div>
    </div>
    <div class="main-mask"></div>
    <div class="nav-side">
      <div class="sm-nav-form j-flex">
        <input type="text" />
        <button>搜索</button>
      </div>
      <ul class="sm-nav-list">
        <li><a href="index.html">首页</a></li>
        <div class="drowdown-box"></div>
        <li><a href="tank.html">作品</a></li>
        <li><a href="zhang.html" target="_blank">分享</a></li>
        <li><a href="https://gitee.com/cvscloud/xiaozu-kaifa">码云</a></li>
        <li><a href="about.html">关于</a></li>
      </ul>
    </div>
    <div class="main-img">
      <video autoplay muted loop id="video-bg">
        <source
          src="https://cn-sy1.rains3.com/akatest/video/20240501_164615.mp4"
          type="video/mp4"
        />
      </video>
      <div class="img-mask">
        <div
          style="height: 100%; width: 100%"
          class="j-flex j-align-items-center j-justify-content-center textbox"
        >
          <div class="img-text">
            <h1
              class="text-center text-light main-title"
              style="letter-spacing: 0.2em"
            >
              WEB与信息时代
            </h1>
            <div
              class="dropdown-divider"
              style="
                background-color: orange;
                width: 250px;
                margin: 15px auto;
                height: 5px;
                border-radius: 10px;
              "
            ></div>
            <p style="color: white; margin-top: 40px">
              Web时代的意义和前景是广泛而深远的，它改变了人们的生活方式、工作方式，甚至思维方式。<br />The
              significance and prospects of the Web era are broad and
              far-reaching, and it has changed the way people live, work, and
              even think.
            </p>
            <a
              href="#title"
              style="float: right; color: white; text-decoration: none"
              class="font-weight-bold"
              >了解更多&nbsp;<i
                class="fa fa-angle-double-right"
                style="font-size: 20px"
              ></i
            ></a>
          </div>
        </div>
      </div>
    </div>
    <div class="container j-mt70 an" id="title" style="opacity: 0">
      <h3 style="letter-spacing: 0.3rem" class="text-center">WEB与信息时代</h3>
      <div
        class="dropdown-divider"
        style="
          background-color: orange;
          width: 250px;
          margin: 15px auto;
          height: 5px;
          border-radius: 10px;
        "
      ></div>
      <p class="p-2 mt-3" style="letter-spacing: 0.1rem">
        <span class="font-weight-bold">意义：</span>
        Web技术使得全球范围内的信息都可以轻松获取，极大地拓宽了人们的视野，使得知识的传播和学习变得更加高效。Web平台为人们提供了多样化的交流方式，如社交媒体、在线论坛等，使得人们可以跨越地域限制，实现实时交流和互动。Web技术的发展催生了众多新的商业模式，如电子商务、在线教育、远程办公等，为经济增长和就业创造了更多机会。Web时代的来临也推动了社会的进步和发展，如数字化政府、智慧城市等项目的实施，提高了社会管理和服务的效率。
      </p>
      <p class="p-2" style="letter-spacing: 0.1rem">
        <span class="font-weight-bold">前景：</span>
        随着云计算、大数据、人工智能等技术的不断发展，Web时代的技术基础将更加坚实，为人们提供更加优质、高效的服务。
        随着大数据和人工智能技术的应用，Web平台将能够更准确地了解用户的需求和偏好，提供个性化的服务，提升用户体验。
        Web技术将促进不同产业的融合和创新，形成新的产业链和生态圈，推动经济的持续发展。
        Web时代将进一步推动全球化的进程，使得不同国家和地区的人们能够更加紧密地联系在一起，共同推动世界的进步和发展。
      </p>
    </div>
    <div class="j-container" style="margin-top: 100px">
      <h3 class="text-center" id="title2">Web开发技术</h3>
      <div
        class="dropdown-divider"
        style="
          background-color: orange;
          width: 190px;
          margin: auto;
          height: 5px;
          border-radius: 10px;
        "
      ></div>
      <div class="mt-4 j-flex j-justify-content-around">
        <div class="skill-box">
          <a href="https://cn.vuejs.org/" target="_blank">
            <img src="images/skillpng.png" width="100%" height="auto" alt="" />
          </a>
          <h5 class="text-center mt-3">Vue</h5>
          <p>Vue是一套构建用户界面的渐进式框架。</p>
        </div>
        <div class="skill-box">
          <a href="https://www.runoob.com/" target="_blank">
            <img src="images/pic_html5.png" width="100%" height="auto" alt="" />
          </a>
          <h5 class="text-center mt-3">H5</h5>
          <p>
            三剑客的分工<br />
            HTML：负责网页的架构；<br />
            CSS：负责网页的样式，美化；<br />
            JavaScript（JS）：负责网页的行为
          </p>
        </div>
        <div class="skill-box">
          <a href="https://nodejs.org/en" target="_blank">
            <img
              src="images/node-js-logo.png"
              width="100%"
              height="auto"
              alt=""
            />
          </a>
          <h5 class="text-center mt-3">Node.js</h5>
          <p>
            一个基于JavaScript运行的服务器端平台，用于构建高效的、可扩展的Web应用。Node.js通常与Express框架一起使用。
          </p>
        </div>
        <div class="skill-box">
          <a href="tank.html" target="_blank">
            <img
              src="Tank\img\tU.gif"
              width="100%"
              height="auto"
              alt=""
              style="border-radius: 100% 100%"
            />
          </a>
          <h5 class="text-center mt-3">坦克大战</h5>
          <p>一个H5小游戏,Web的魅力。</p>
        </div>
      </div>
    </div>
    <div class="j-container" style="margin-top: 70px">
      <h3 class="text-center">小组作业讲解</h3>
      <div
        class="dropdown-divider"
        style="
          background-color: orange;
          width: 190px;
          margin: auto;
          height: 5px;
          border-radius: 10px;
        "
      ></div>
      <div class="j-flex j-justify-content-around">
        <div class="footer-end">
          <video src="#" controls width="100%" height="180px"></video>
        </div>
        <div class="footer-end">
          <ul>
            <li>本作品采用flex和响应式布局</li>
            <li>添加了一些交互效果</li>
            <li>对pc和移动端友好</li>
            <li>...</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer j-mt70" style="margin-top: 100px">
      <div class="j-container j-flex j-justify-content-around mt-5">
        <div class="footer-sharp">
          <p class="text-center text-light" style="font-size: 1rem">交流一下</p>
          <input
            type="text"
            class="inp-sharp"
            placeholder="输入您的用户名"
            style="height: 30px"
          />
          <textarea
            type="text"
            class="inp-sharp"
            placeholder="分享一下您的想法"
            style="height: 100px; margin-top: 10px"
          ></textarea>
          <button>提交</button>
        </div>
        <div class="footer-text">
          <p class="text-center text-light" style="font-size: 1rem">友情链接</p>
          <div class="j-flex j-justify-content-center footer-links">
            <span><a href="https://www.bilibili.com/">B站</a></span>
            <span><a href="https://www.runoob.com/">菜鸟教程</a></span>
            <span><a href="https://www.w3school.com.cn/">w3school</a></span>
            <span
              ><a href="https://gitee.com/cvscloud/xiaozu-kaifa"
                >小组码云仓库</a
              ></span
            >
            <span
              ><a href="https://codelover.club/curr/42">数字化成长空间</a></span
            >
          </div>
          <p class="text-center text-light mt-4" style="font-size: 1rem">
            联系我们
          </p>
          <ul class="footer-info" style="list-style-type: none; width: 100%">
            <li><i class="fa fa-envelope-o"></i> 电话：130XXXXXXXX</li>
            <li><i class="fa fa-envelope-o"></i> 邮箱：XXXXXXXX@163.com</li>
            <li><i class="fa fa-envelope-o"></i> 地址：XXXXXXXX</li>
          </ul>
        </div>
      </div>
      <p
        class="text-center p-2"
        style="margin: 0; color: rgba(205, 205, 205, 1); font-size: 0.7rem"
      >
        源于 顺职2班第一组 开发设计
      </p>
    </div>
    <div
      class="sidebar-open j-flex j-justify-content-center j-align-items-center"
      style="opacity: 0"
    >
      <a
        href="#"
        class="fa fa-chevron-up"
        style="font-size: 20px; color: white; text-decoration: none"
      ></a>
    </div>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap-4.3.1.js"></script>
    <script src="js/home.js"></script>
  </body>
</html>
